<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>柱形图</title>
	<script src="./d3/d3.v3.min.js" charset="utf-8"></script>
	<style>
		
	</style>
</head>
<body>
	
	
<svg></svg>




</body>
<script type="text/javascript">



var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("svg")     //选择文档中的body元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");




</script>
</html>
